<template>
<div>
<el-row>

<el-form :inline="true" :model="form" >
	

	<el-form-item >
	    <el-input v-model="form.name" placeholder="接口名称"></el-input>
	</el-form-item>


	<el-form-item>
	    <el-button type="primary" @click="init">查询</el-button>
	</el-form-item>

</el-form>
</el-row>

<el-row>
	<el-table
	:data="apiList.results"
	border
	style="width: 100%">
	<el-table-column
	  label="名称/数据库"
	  width="100">
	  <template slot-scope="scope">
	  	<div>{{scope.row.name}}</div>
	  	<div>{{scope.row.dbname}}</div>
	  </template>
	</el-table-column>
	<el-table-column
	  label="sql"
	  width="400">
	  <template slot-scope="scope">
	  	<div v-html="scope.row.sqlHtml"></div>
	  </template>
	</el-table-column>
	<el-table-column
	  label="参数"
	  width="300">
	  <template slot-scope="scope">
	  	<div v-for="(item, index) in scope.row.paramObj" :key="index">
	  		{{item.value}} 
	  		<span v-if="item.need">必填</span>
	  		<span v-else>可选</span>
	  	</div>
	  </template>
	</el-table-column>
	<el-table-column
	  label="操作"
	  width="150">
	  <template slot-scope="scope">
	  	111
	  </template>
	</el-table-column>
	</el-table>
</el-row>

<el-row class="text-right mt20 mb20">
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="pageNo"
  :page-size="pageSize"
  layout="total, prev, pager, next, jumper"
  :total="apiList.totalRecord">
</el-pagination>
</el-row>
</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'test',
	
	data () {
		return {
		  	apiList : {},

		  	form : {},

			pageNo : 1,
			pageSize : 5,

		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		init () {
			this.$http({
				f : 'fun',
				name : this.form.name,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				requestType : 'get',
				cb : res => {
					console.log(res);
					this.apiList = res;
					this.apiList.results.forEach(item => {
						item['sqlHtml'] = item.sqlstr ? 
						item.sqlstr.replace(/\n/g,"<br/>") :''

						item['paramObj'] = item.param ?
						JSON.parse(item.param) : ''
					})
				}
			})
		},


		onSubmit () {

		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
